<template>
  <div class="topo-editor">
    <div class="top-menu">
      <div class="top-left">
         
        <!-- <project-tree
          v-model="treeData"
          :showTabs="false"
          :clearable="true"
          :isMultiple="false"
          :requestParams="{ treeType: 1 }"
          :anotherStyle="false"
          :showTitle="false"
          ref="projectTree"
        ></project-tree>  -->
      </div>
      <div class="top-center">
        <!--顶部工具栏-->
        <tool-bar></tool-bar>
      </div>
    </div>
    <WresizePanel3 class="full-height">
      <template v-slot:left>
        <TopoToolbox ref="topoToolbox" class="topo-toolbox" />
      </template>

      <template v-slot:center>
        <TopoMain ref="topoMain" class="topo-main-container" />
      </template>

      <template v-slot:right>
        <TopoProperties ref="topoProperties" class="topo-properties" />
      </template>
    </WresizePanel3>
  </div>
</template>

<script>
import WresizePanel3 from "@/components/panel/WresizePanel3";

import TopoToolbox from "@/components/topo/TopoToolbox";
import TopoMain from "@/components/topo/TopoMain";
import TopoProperties from "@/components/topo/TopoProperties";

import ProjectTree from "@/components/topo/control/projecttree";
import { mapGetters, mapMutations, mapActions } from "vuex";

import ToolBar from "@/components/topo/ToolBar.vue";

export default {
  name: "TopoEditor",
  components: {
    WresizePanel3,
    TopoToolbox,
    TopoMain,
    TopoProperties,
    ProjectTree,
    ToolBar
  },
  data() {
    return { treeData: [] };
  },
  created() {
    if (this.getShopNumber) {
      this.treeData.push(this.getShopNumber);
    }
    console.log("this.getShopNumber :", this.getShopNumber);
    // this.iniShopInfo();
  },
  mounted() {
    // this.loadDefaultTopoData();
  },
  computed: {
    ...mapGetters("topoEditor", ["getShopNumber"])
  },
  watch: {
    treeData(val) {
      if (val && val.length > 0) {
        console.log("curShopNumber :", val[0]);
        this.setShopNumber(val[0]);
        this.iniShopInfo();
        this.loadDefaultTopoData(val[0]);
      }
    }
  },
  methods: {
    ...mapMutations("topoEditor", [
      "setShopNumber",
      "setShopInfo",
      "setTopoData"
    ]),
    ...mapActions("topoEditor", ["loadDefaultTopoData"]),
    iniShopInfo() {
      // this.$nextTick(() => {
      //   let nodes = this.$refs.projectTree.$refs.elTree.getCheckedNodes();
      //   console.log("nodes :", nodes);
      //   if (nodes && nodes.length > 0) {
      //     this.setShopInfo(nodes[0]);
      //   }
      // });
    }
  }
};
</script>

<style lang="scss">
.topo-editor {
  padding: 10px;
  position: relative;
  width: 100%;
  height: calc(100vh - 40px);
  background-color: #eee;
  .top-menu {
    height: 40px;
    background-color: white;
    border: #ccc solid 1px;
    border-bottom: 0px;
    padding: 0px 15px;
  }
  .top-left {
    float: left;
    width: 300px;
  }
  .top-center {
    float: left;
  }

  .topo-toolbox {
    width: 100%;
    height: 100%;
  }

  .topo-main-container {
    width: 100%;
    height: 100%;
  }

  .topo-properties {
    width: 100%;
    height: 100%;
  }
}
</style>
